<template>
  <div class="menu_bg">
    <div class="menu">
      <!--Begin 商品分类详情 Begin-->
      <div class="nav">
        <div class="nav_t">全部商品分类</div>
        <div class="leftNav">
          <ul>
            <li v-for="category in firstLevelList" :key="category.id">
              <div class="fj">
                <!-- getSonLevelList(category.id, category.name, 2) -->
                <span class="n_img" v-show="category.iconClass"
                  ><span></span><img src="@/assets/images/nav1.png"
                /></span>
                <span class="fl">
                  <span v-show="!category.iconClass"
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  >
                  <router-link
                    :to="{
                      name: 'GoodsList',
                      params: { type: 1, categoryId: category.id },
                    }"
                    >{{ category.name }}</router-link
                  >
                </span>
              </div>

              <div class="zj">
                <div class="zj_l">
                  <template v-if="levelMap[category.name]">
                    <div
                      class="zj_l_c"
                      v-for="categorySon in levelMap[category.name]"
                      :key="categorySon.id"
                    >
                    <!-- 二级分类 -->
                      <h2><router-link
                        :to="{
                          name: 'GoodsList',
                          params: { type: 2, categoryId: categorySon.id },
                        }"
                        >{{ categorySon.name}}</router-link
                      ></h2>
                      <!-- <h2>{{ categorySon.name }}</h2> -->
                      <template v-if="levelMap[categorySon.name]">
                        <span>
                          <!-- 三级分类 -->
                          <router-link
                            v-for="grandson in levelMap[categorySon.name]"
                            :to="{
                              name: 'GoodsList',
                              params: { type: 2, categoryId: grandson.id },
                            }"
                            :key="grandson.id"
                            >{{ grandson.name }}</router-link
                          ></span
                        >
                      </template>
                      <template v-if="levelMap[categorySon.name] == null">
                        <span>暂无更多分类</span>
                      </template>
                    </div>
                  </template>
                  <template v-if="!levelMap[category.name]">
                    暂无更多分类
                  </template>
                </div>
                <div class="zj_r">
                  <a href="#"
                    ><img
                      src="@/assets/images/n_img1.jpg"
                      width="236"
                      height="200"
                  /></a>
                  <a href="#"
                    ><img
                      src="@/assets/images/n_img2.jpg"
                      width="236"
                      height="200"
                  /></a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--End 商品分类详情 End-->
      <ul class="menu_r">
        <li><router-link :to="{name: 'IndexCenter'}">首页</router-link></li>
        <li><a href="Food.html">美食</a></li>
        <li><a href="Fresh.html">生鲜</a></li>
        <li><a href="HomeDecoration.html">家居</a></li>
        <li><a href="SuitDress.html">女装</a></li>
        <li><a href="MakeUp.html">美妆</a></li>
        <li><a href="Digital.html">数码</a></li>
        <li><a href="GroupBuying.html">团购</a></li>
      </ul>
      <div class="m_ad">中秋送好礼！</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //所有一级分类
      firstLevelList: [],
      levelMap: {}, //每个分类对应的子分类，没有则为[], key为分类名，value为数组
    };
  },
  methods: {
    getFirstLevelList() {
      this.$axios({
        url: "/api/category/first",
        method: "post",
      }).then((rs) => {
        this.firstLevelList = rs.data.categories;
        this.firstLevelList.forEach((i) => {
          this.getSonLevelList(i.id, i.name, 2);
        });
      });
    },
    getSonLevelList(id, name, level) {
      //如果有则直接获取
      if (this.levelMap[name]) return;
      this.$axios({
        url: "/api/category/" + (level == 2 ? "second" : "third"),
        method: "post",
        data: {
          id: id,
        },
      }).then((rs) => {
        this.$set(this.levelMap, name, rs.data.categories || []);
        if (level == 2 && rs.data.categories) {
          rs.data.categories.forEach((i) => {
            this.getSonLevelList(i.id, i.name, 3);
          });
        }

        //分类多个组件使用，存放在vuex + sessionStorage中
        sessionStorage.setItem(
          "firstLevelList",
          JSON.stringify(this.firstLevelList)
        );
        sessionStorage.setItem("levelMap", JSON.stringify(this.levelMap));
        this.$store.commit("SET_FIRST_LEVEL_LIST", this.firstLevelList);
        this.$store.commit("SET_LEVEL_MAP", this.levelMap);
      });
    },
  },
  created() {
    if (!sessionStorage.getItem("firstLevelList")) {
      this.getFirstLevelList();
    } else {
      this.firstLevelList = JSON.parse(
        sessionStorage.getItem("firstLevelList")
      );
      this.levelMap = JSON.parse(sessionStorage.getItem("levelMap"));
    }
  },
};
</script>

<style scoped>
/* 确保每个分类项有相对定位 */
.leftNav ul li {
  position: relative;
}

/* 默认隐藏所有子菜单 */
.zj {
  display: none;
  position: absolute;
  left: 211px; /* 与左侧导航宽度一致 */
  top: 0;
  width: 989px;
  height: 411px;
  background-color: #fff;
  border: 1px solid #d4d2d2;
  z-index: 1000;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影增强视觉效果 */
}

/* 修复hover显示逻辑 */
.leftNav ul li:hover .zj {
  display: block;
}

/* fj悬停效果 */
.fj:hover {
  background-color: #fff;
  color: #ff4e00;
  cursor: pointer;
}

/* 确保整个li项的hover都能触发 */
.leftNav ul li:hover {
  background-color: #fff;
}

.leftNav ul li:hover .fj {
  color: #ff4e00;
}
</style>


